<template>
  <a-modal
    v-model:visible="visible"
    modal-class="modal-form"
    title-align="start"
    :title="title"
    :top="80"
    :width="500"
    :align-center="false"
    :draggable="true"
    :mask-closable="false"
    :unmount-on-close="true"
    :ok-button-props="{ disabled: loading }"
    :cancel-button-props="{ disabled: loading }"
    :on-before-ok="handlerOk"
    @close="handleClose"
  >
    <a-spin class="form-full" :loading="loading">
      <a-form
        ref="formRef"
        :model="formModel"
        label-align="right"
        :auto-label-width="true"
        :rules="formRules"
      >
        <!-- 角色名称 -->
        <a-form-item field="name" label="角色名称">
          <a-input v-model="formModel.name" placeholder="请输入角色名称" />
        </a-form-item>
        <!-- 角色标识 -->
        <a-form-item field="code" label="角色标识">
          <a-input v-model="formModel.code" placeholder="请输入角色标识" />
        </a-form-item>
        <!-- 状态 -->
        <a-form-item label="状态">
          <a-radio-group v-model="formModel.status" type="button">
            <a-radio :value="1">正常</a-radio>
            <a-radio :value="2">禁用</a-radio>
          </a-radio-group>
        </a-form-item>
        <!-- 排序 -->
        <a-form-item label="排序">
          <a-input-number
            v-model="formModel.sort"
            :style="{ width: '320px' }"
            placeholder="请输入排序"
            mode="button"
          />
        </a-form-item>
        <!-- 备注 -->
        <a-form-item label="备注" field="note">
          <a-textarea v-model="formModel.note" placeholder="请输入备注" />
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import useLoading from '@/hooks/loading';
  import useVisible from '@/hooks/visible';
  import { UpdateRequest, updateRows } from '@/api/system/role';
  import { Message } from '@arco-design/web-vue';
  import formRules from '../types/form.rules';

  const { visible, setVisible } = useVisible();
  const { loading, setLoading } = useLoading();
  const title = ref<string>();
  const isAddHandle = ref<boolean>(true);
  const defaultForm = (): UpdateRequest => {
    return {
      id: undefined,
      name: undefined,
      code: undefined,
      status: 1,
      sort: 50,
      note: undefined,
    };
  };
  const formRef = ref();
  const formModel = ref<UpdateRequest>({});
  const emits = defineEmits(['restart']);
  const renderForm = (record: any) => {
    formModel.value = { ...record };
  };
  // 打开新增
  const openAdd = () => {
    title.value = '添加角色';
    isAddHandle.value = true;
    renderForm({ ...defaultForm() });
    setVisible(true);
  };
  // 打开修改
  const openUpdate = (record: any) => {
    title.value = '修改角色';
    isAddHandle.value = false;
    renderForm({ ...defaultForm(), ...record });
    setVisible(true);
  };
  defineExpose({ openAdd, openUpdate });

  const handlerClear = () => {
    setLoading(false);
  };
  // 确定
  const handlerOk = async () => {
    setLoading(true);
    try {
      // 验证参数
      const error = await formRef.value.validate();
      if (error) {
        return false;
      }
      //  修改
      await updateRows(formModel.value);
      Message.success('操作成功');

      emits('restart');
      // 清空
      handlerClear();
      return true;
    } catch (e) {
      return false;
    } finally {
      setLoading(false);
    }
  };
  // 关闭
  const handleClose = () => {
    handlerClear();
  };
</script>

<style scoped lang="less"></style>
